<template>
  <div id="particles">
    <div id="son">
      <el-form ref="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="username" placeholder="请输入用户名/邮箱"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="password" placeholder="请输入密码" show-password
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="" style="position: absolute">
          <el-checkbox v-model="keepLogin">保持登录</el-checkbox>
        </el-form-item>
        <br>
        <div v-if="keepLogin" style="position: absolute;margin-left: 80px;margin-top: 20px">
          <el-radio v-model="days" label="3">三天</el-radio>
          <el-radio v-model="days" label="5">五天</el-radio>
          <el-radio v-model="days" label="7">七天</el-radio>
          <el-radio v-model="days" label="30">三十天</el-radio>
        </div>
        <el-button @click="backHome" id="back" class="buttonBack" style="margin-left: 65px">返回</el-button>
        <el-button @click="login" id="log" class="buttonNext" :loading="loading">登录</el-button>
        <br>
        <router-link to="/register" id="re">注册</router-link>
      </el-form>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import particlesJson from '@/assets/particles.json'
import FingerprintJS from '@fingerprintjs/fingerprintjs';

export default {
  data() {
    return {
      username: '',
      password: '',
      loading: false,
      fingerprint: '',
      days: 1,
      keepLogin: false,
    }
  },
  mounted() {
    require('particles.js')
// eslint-disable-next-line no-undef
    particlesJS('particles', particlesJson);
    this.username = '';
    this.password = '';
  },
  created() {
  },
  methods: {
    async login() {
      await this.getFingerprint();
      let username = this.username;
      let password = this.password;
      let fingerprint = this.fingerprint;
      let days = this.keepLogin ? this.days : 1;
      if (username === '' || password === '') {
        this.$message.warning('用户名或密码不能为空');
        return;
      }
      this.loading = true;
      axios.post('/user/login', {username, password, fingerprint, days}).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          let token = res.data.data.token;
          sessionStorage.setItem('token', token);
          this.$message({
            message: '登录成功',
            type: 'success',
          });
          let user = res.data.data.user;
          sessionStorage.setItem('identity', user.identity);
          this.username = '';
          this.password = '';
          if (user && user.identity === 1) {
            this.$router.push('/adminHomePage');
          } else {
            this.$router.push('/userHomePage');
          }
        } else {
          this.$message.error(res.data.msg);
        }
      })
      this.loading = false;
    },
    backHome() {
      this.$router.push('/');
    },
    async getFingerprint() {
      const fp = await FingerprintJS.load();
      const result = await fp.get();
      this.fingerprint = result.visitorId;
    },
  }
}
</script>

<style scoped>
@import "@/assets/style/button.css";

#particles {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background: url("@/assets/background/star.png") center center no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

#son {
  width: 30%;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 15px;
  overflow-y: auto;
}

.el-form {
  margin: 80px 35px 0 0;
}

.el-input {
  border-radius: 10px;
}

#log:hover {
  transition: all 0.85s;
  transform: scale(1.2);
  color: #078c1d;
  background-color: #99ef99;
}

#back:hover {
  color: #2f3031;
  background-color: #afacac;
  transition: all 1s;
  transform: scale(1.2);
}

#re {
  text-decoration: none;
  color: #f3b06d;
  margin-top: 50px;
  margin-left: 50%;
}

#re:hover {
  color: #ef8305;
}

.el-radio{
  margin-right: 3px;
}
</style>